<template>
  <div class="system-backup">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>数据备份</span>
          <el-tag :type="autoBackupEnabled ? 'success' : 'danger'" size="small">
            {{ autoBackupEnabled ? '自动备份已启用' : '自动备份已禁用' }}
          </el-tag>
        </div>
      </template>
      
      <div v-if="!autoBackupEnabled" class="backup-disabled">
        <el-alert
          title="自动备份功能已禁用"
          description="自动备份功能已被管理员禁用，请联系管理员启用此功能。"
          type="warning"
          :closable="false"
          show-icon
        />
        <el-button @click="goBack" style="margin-top: 20px;">返回系统管理</el-button>
      </div>
      
      <div v-else class="backup-content">
        <h3>数据备份功能</h3>
        <p>管理系统数据备份，包括备份创建、恢复、下载等</p>
        <p>自动备份时间：{{ backupTime }}</p>
        <p>备份保留天数：{{ backupRetentionDays }}天</p>
        <el-button @click="goBack">返回系统管理</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getConfigStatus } from '@/api/system'

const router = useRouter()

// 备份相关配置状态
const autoBackupEnabled = ref(true)
const backupTime = ref('02:00')
const backupRetentionDays = ref(30)

// 检查配置状态
const checkConfigStatus = async () => {
  try {
    const response = await getConfigStatus()
    if (response.code === 200) {
      autoBackupEnabled.value = response.data.autoBackupEnabled
      backupTime.value = response.data.backupTime || '02:00'
      backupRetentionDays.value = parseInt(response.data.backupRetentionDays) || 30
    }
  } catch (error) {
    console.error('获取配置状态失败:', error)
    ElMessage.error('获取配置状态失败')
  }
}

const goBack = () => {
  router.push('/system')
}

onMounted(() => {
  checkConfigStatus()
})
</script>

<style scoped>
.system-backup {
  padding: 20px;
}

.backup-content {
  text-align: center;
  padding: 40px 0;
}

.backup-content h3 {
  color: #409eff;
  margin-bottom: 20px;
}

.backup-content p {
  color: #606266;
  margin-bottom: 30px;
}
</style>
